<template>
  <div>
    <van-nav-bar
      title="搜索使用助手"
      left-arrow
      @click-left="$router.push({path: '/jinpinHelper'})"
    />
    <van-search
      v-model="name"
      placeholder="请输入关键字搜索"
      show-action
      shape="round"
      @search="handleSearch"
      @clear="toClearKeyWord"
    >
      <van-tag round type="primary" slot="action" @click="handleSearch" size="large">搜索</van-tag>
    </van-search>

    <div v-if="listArr.length > 0">
      <div class="project-item" v-for="(item) in listArr">
        <div class="title">{{item.name}}</div>
        <div class="videoContainer" @click="handleVideoPath(item.url, 'jumpLink')" >
          <van-image class="videoImg" width="100%" :src="videoLogo" />
        </div>
        <div class="bottom">
          <div>
            <span style="font-weight: bold; font-size: 12px; margin-right: 2px;">近聘官方</span>
            <span style="color: #A894A6; ">发布</span>
          </div>
          <div>
            <van-button icon="share" size="mini" type="info" @click="handleVideoPath(item.url, 'share')">分享</van-button>
          </div>
        </div>
      </div>
    </div>

    <van-empty v-else description="暂无" />

  </div>
</template>

<script>
import { Toast } from "vant";
import videoLogo from './videoLogo.jpg'

export default {
  name: "searchHelper",

  data(){
    return {
      videoLogo,
      name: '',
      listArr: [],
    }
  },

  methods: {
    async _getVideoListByName(name=''){
      const paramsObj = {
        name: name
      };
       const resp = await this.$api.others.getassistantbyName(paramsObj);
      if(resp.code === 200){
        this.listArr = resp?.data || []
      }
    },
    handleSearch() {
      if(this.name.trim()){
        this._getVideoListByName(this.name.trim())
      } else {
        Toast('请先输入！');
      }
    },
    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return
      }
      this.name = '';
      this.listArr = []
    },

    handleVideoPath(url, keyName){
      // 跳转至外部链接
      if(keyName === 'jumpLink'){
        window.open(url, '_blank')
      }

      // 分享
      if (keyName === 'share'){
        this.$copyText(url).then(
          function(e) {
            Toast('复制成功, 将视频地址粘贴分享给其他人即可')
          },
          function(e) {
            Toast('复制出错')
          }
        )
      }

      if (keyName === 'download'){
        console.log('下载');
        window.open(url, '_blank')
      };

    },
  }

};
</script>

<style lang="scss" scoped>
.project-item{
  background-color: #FFFFFF;
  padding: 6px 10px 10px 10px;
  border-bottom: 1px solid #dddddd;
  text-align: center;
  .title{
    font-size: 13.6px;
    font-weight: bold;
    line-height: 1.666;
    text-align: justify;
  }
  .videoContainer{
    background-color: #eee;
    .videoImg{
      vertical-align: bottom;
    }
  }
  .bottom{
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
